<template>
  <ElTimeline>
    <ElTimelineItem v-for="(item, index) in processRecordList" :key="index" :timestamp="item.nodeName" placement="top">
      <ElCard>
        <ElDescriptions :column="1" border>
          <ElDescriptionsItem label="处理人">{{ item.nickName }}</ElDescriptionsItem>
          <ElDescriptionsItem label="接收时间" v-if="item.endTime !== item.startTime">{{ item.startTime }}</ElDescriptionsItem>
          <ElDescriptionsItem label="处理时间" v-if="!!item.endTime">{{ item.endTime }}</ElDescriptionsItem>
          <ElDescriptionsItem label="耗时" v-if="!!item.duration && item.endTime !== item.startTime">{{
            msToTime(item.duration)
          }}</ElDescriptionsItem>
        </ElDescriptions>
      </ElCard>
    </ElTimelineItem>
  </ElTimeline>
</template>

<script setup lang="ts">
import { ElTimeline, ElTimelineItem, ElCard, ElDescriptions, ElDescriptionsItem } from "element-plus";
import microCamundaApi from "@/views/micro/api/camunda.api";
import { ref, watch } from "vue";
const props = defineProps({
  taskId: {
    type: String
  }
});
const processRecordList = ref([]);
watch(
  () => props.taskId,
  async taskId => {
    if (taskId) {
      processRecordList.value = await microCamundaApi.listHistoryRecordByTaskId(taskId);
    } else {
      processRecordList.value = [];
    }
  },
  {
    immediate: true
  }
);
const msToTime = mss => {
  const days = Math.floor(mss / (1000 * 60 * 60 * 24));
  const hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.round((mss % (1000 * 60)) / 1000);
  if (days > 0) {
    return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
  } else if (hours > 0) {
    return hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
  } else if (minutes > 0) {
    return minutes + " 分钟 " + seconds + " 秒 ";
  } else {
    return seconds + " 秒 ";
  }
};
</script>

<style scoped></style>
